<template>
  <div class="contact">
    <el-button
      type="warning"
      plain
      @click="addcontact"
    >新增收货地址</el-button>
    <div class="add_box">
      <el-form label-width="80px">
        <el-form-item label="收货人">
          <el-input v-model="adduser"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="adddizhi"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="addtel"></el-input>
        </el-form-item>
        <p style="text-align:right">
          <el-button
            type="primary"
            @click="out=false"
          >取消</el-button>
          <el-button
            type="primary"
            @click="addcon"
          >保存</el-button>
        </p>
      </el-form>
    </div>
    <div class="box">
      <div
        class="card_contact"
        v-for="item in contact"
        :key="item.id"
      >
        <p style="text-align:right">设为默认地址
          <el-radio-group
            v-model="contactFlagId"
            @change="selectContact"
          >
            <el-radio :label="item.id">{{''}}</el-radio>
          </el-radio-group>
        </p>
        <p>收货人：{{item.name}}</p>
        <p>所在地区：{{item.address}}</p>
        <p>详细地址：{{}}</p>
        <p>手机号：{{item.mobile}}</p>
        <el-row>
          <el-col
            :span="12"
            class="btn"
          >
            <a @click="delcontact(item.id)">删除</a>
          </el-col>
          <el-col
            :span="12"
            class="btn"
          >
            <a @click="outerVisible(item.id)">修改</a>
          </el-col>
          <el-dialog
            title="修改联系人"
            :visible.sync="outer"
          >
            <el-dialog
              width="20%"
              title="修改联系人"
              :visible.sync="innerVisible"
              append-to-body
            >
            </el-dialog>
            <el-form label-width="80px">
              <el-form-item label="收货人">
                <el-input v-model="people"></el-input>
              </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="dizhi"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="phone"></el-input>
              </el-form-item>
              <p style="text-align:right">
                <el-button
                  type="primary"
                  @click="outer=false"
                >取消</el-button>
                <el-button
                  type="primary"
                  @click="setcontact"
                >保存</el-button>
              </p>
            </el-form>
          </el-dialog>
          <!-- 新建联系人 -->
          <el-dialog
            title="新建联系人"
            :visible.sync="out"
          >
            <el-dialog
              width="20%"
              title="修改联系人"
              :visible.sync="inner"
              append-to-body
            >
            </el-dialog>
            <el-form label-width="80px">
              <el-form-item label="收货人">
                <el-input v-model="adduser"></el-input>
              </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="adddizhi"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="addtel"></el-input>
              </el-form-item>
              <p style="text-align:right">
                <el-button
                  type="primary"
                  @click="out=false"
                >取消</el-button>
                <el-button
                  type="primary"
                  @click="addcon"
                >保存</el-button>
              </p>
            </el-form>
          </el-dialog>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "contact",
  data() {
    return {
      adduser: "",
      addtel: "",
      adddizhi: "",
      people: "",
      dizhi: "",
      phone: "",
      contact: [],
      username: "",
      tel: "",
      address: "",
      nametxt: "",
      teltxt: "",
      addresstxt: "",
      isSet: 0,
      contactFlagId: "",
      outer: false,
      innerVisible: false,
      xiugaiID: "",
      out: false,
      inner: false,
    };
  },
  methods: {
    //   获取常用联系人
    getContact() {
      this.$post(this.url + "/content/selectContent", {
        userId: this.$store.state.user.id,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.contact = res.data;
          this.contact.forEach((element) => {
            if (element.contactFlag == 1) {
              this.contactFlagId = element.id;
            }
          });
        }
      });
    },
    // 更改联系人
    selectContact() {
      console.log(this.contactFlagId);
      this.$post(this.url + "/content/setContent", {
        userId: this.$store.state.user.id,
        id: this.contactFlagId,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
    },
    // 删除联系人
    delcontact(id) {
      this.$post(this.url + "/content/deleteContent", {
        userId: this.$store.state.user.id,
        id: id,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getContact();
        }
      });
    },
    // 添加联系人
    addContact() {
      if (this.username == "" && this.tel == "" && this.address == "") {
        this.nametxt = "姓名不能为空";
        this.teltxt = "电话不能为空";
        this.addresstxt = "地址不能为空";
      } else if (this.tel == "" && this.address == "") {
        this.teltxt = "电话不能为空";
        this.addresstxt = "地址不能为空";
      } else if (this.username == "") {
        this.nametxt = "姓名不能为空";
      } else if (this.tel == "") {
        this.teltxt = "电话不能为空";
      } else if (this.address == "") {
        this.addresstxt = "地址不能为空";
      } else {
        if (this.isSet == 0) {
          this.$post(this.url + "/content/updateContent", {
            userId: this.$store.state.user.id,
            name: this.username,
            mobile: this.tel,
            address: this.address,
            flag: 0,
          }).then((res) => {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.username = "";
            this.tel = "";
            this.address = "";
            this.getContact();
          });
        } else {
          this.$post(this.url + "/content/insertContent", {
            userId: this.$store.state.user.id,
            id: this.contactFlagId,
            name: this.username,
            mobile: this.tel,
            flag: 0,
            address: this.address,
          }).then((res) => {
            if (res.errorCode == "0") {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.username = "";
              this.tel = "";
              this.address = "";
              this.isSet = 0;
              this.getContact();
            }
          });
        }
      }
    },
    // 编辑联系人
    changeContact(id) {
      this.isSet = 1;
      this.contact.forEach((element) => {
        if (id == element.id) {
          this.username = element.name;
          this.tel = element.mobile;
          this.address = element.address;
          this.contactFlagId = id;
        }
      });
    },
    outerVisible(id) {
      this.outer = true;
      this.xiugaiID = id;
      this.contact.forEach((element) => {
        if (id == element.id) {
          this.people = element.name;
          this.dizhi = element.address;
          this.phone = element.mobile;
        }
      });
    },

    // 修改联系人
    setcontact() {
      if (this.people == "" || this.phone == "" || this.dizhi == "") {
        this.$message.warning("请检查不能为空");
      } else {
        this.$post(this.url + "/content/updateContent", {
          userId: this.$store.state.user.id,
          id: this.xiugaiID,
          name: this.people,
          mobile: this.phone,
          flag: 0,
          address: this.dizhi,
        }).then((res) => {
          if (res.errorCode == 0) {
            this.$message.success("修改成功");
            this.outer = false;
            this.getContact();
          }
        });
      }
    },
    addcontact() {
      this.out = true;
    },
    addcon() {
      if (this.adduser == "" || this.addtel == "" || this.adddizhi == "") {
        this.$message.warning("请检查不能为空");
      } else {
        this.$post(this.url + "/content/insertContent", {
          userId: this.$store.state.user.id,
          name: this.adduser,
          mobile: this.addtel,
          address: this.adddizhi,
          flag: 0,
        }).then((res) => {
          this.$message.success("添加成功");
          this.out = false;
          (this.adduser = ""), (this.addtel = ""), (this.adddizhi = "");
          this.getContact();
        });
      }
    },
  },
  created() {
    this.getContact();
  },
};
</script>

<style scoped>
h3 {
  margin: 0;
}
.inp_box {
  width: 95%;
  margin: 0 auto;
}
.box {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.tishi {
  color: red;
}
.card_contact {
  width: 45%;
  margin-left: 25px;
  margin-top: 15px;
  border: 1px solid lightgray;
}
.btn {
  text-align: center;
  border: 1px solid lightgray;
}
a {
  display: block;
}
.add_box {
  width: 80%;
  margin: 0 auto;
}
</style>